<template>
  <Modal ref="modalRef" @register="modalRegister" @confirm="handleOk">
    <template #default>
      <div class="cropper-box">
        <div class="cropper-box-left">
          <div class="cropper-box-left-cropper">
            <CropperImage
              v-if="src"
              :circled="circled"
              :src="src"
              height="300px"
              @cropend="handleCropend"
              @ready="handleReady"
            />
          </div>
          <div class="cropper-box-left-toolbar">
            <el-upload
              :show-file-list="false"
              accept="image/*"
              action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
              :before-upload="beforeUpload"
              style="width: auto"
            >
              <el-tooltip placement="bottom" content="上传图片">
                <el-button size="small" type="primary">
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <UploadOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
            </el-upload>
            <el-space>
              <el-tooltip placement="bottom" content="重置">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('reset')"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <ReloadOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" content="逆时针旋转">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('rotate', -45)"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <RotateLeftOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" content="顺时针旋转">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('rotate', 45)"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <RotateRightOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" content="水平翻转">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('scaleX')"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <SwapOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" content="垂直翻转">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('scaleY')"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <VerticalAlignMiddleOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" content="放大">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('zoom', 0.1)"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <ZoomInOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
              <el-tooltip placement="bottom" content="缩小">
                <el-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('zoom', -0.1)"
                >
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <ZoomOutOutlined />
                    </el-icon>
                  </template>
                </el-button>
              </el-tooltip>
            </el-space>
          </div>
        </div>
        <div class="cropper-box-right">
          <div
            :class="{ 'cropper-box-right-preview-radius': circled }"
            class="cropper-box-right-preview"
          >
            <img v-if="previewSource" :src="previewSource" />
          </div>
          <template v-if="previewSource">
            <div class="cropper-box-right-group">
              <el-avatar :src="previewSource" size="large" />
              <el-avatar :size="48" :src="previewSource" />
              <el-avatar :size="64" :src="previewSource" />
              <el-avatar :size="80" :src="previewSource" />
            </div>
          </template>
        </div>
      </div>
    </template>
  </Modal>
</template>

<script lang="ts">
  import type { CropendResult, Cropper } from './typing';
  import { defineComponent, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Modal, useModal } from '@/design/components/Modal';
  import CropperImage from './CropperImage.vue';
  import { dataURLtoBlob } from '@/utils/file/base64Conver';
  import { isFunction } from '@/utils/is';
  import {
    UploadOutlined,
    ReloadOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    SwapOutlined,
    VerticalAlignMiddleOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
  } from '@vicons/antd';

  const props = {
    title: { type: String, default: '图片上传' },
    circled: { type: Boolean, default: false },
    uploadApi: {
      type: Function as PropType<(params) => Promise<any>>,
    },
  };

  export default defineComponent({
    components: {
      Modal,
      CropperImage,
      UploadOutlined,
      ReloadOutlined,
      RotateLeftOutlined,
      RotateRightOutlined,
      SwapOutlined,
      VerticalAlignMiddleOutlined,
      ZoomInOutlined,
      ZoomOutOutlined,
    },
    props,
    setup(props, { emit }) {
      const modalRef: any = ref(null);
      let filename = '';
      const src = ref('');
      const previewSource = ref('');
      const cropper = ref<Cropper>();
      let scaleX = 1;
      let scaleY = 1;

      const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
        title: props.title,
        width: 800,
      });

      function showModal() {
        openModal();
      }

      // 上传图片
      function beforeUpload(file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        src.value = '';
        previewSource.value = '';
        reader.onload = function (e) {
          src.value = (e.target?.result as string) ?? '';
          filename = file.name;
        };
        return false;
      }

      function handleCropend({ imgBase64 }: CropendResult) {
        previewSource.value = imgBase64;
      }

      function handleReady(cropperInstance: Cropper) {
        cropper.value = cropperInstance;
      }

      function handlerToolbar(event: string, arg?: number) {
        if (event === 'scaleX') {
          scaleX = arg = scaleX === -1 ? 1 : -1;
        }
        if (event === 'scaleY') {
          scaleY = arg = scaleY === -1 ? 1 : -1;
        }
        cropper?.value?.[event]?.(arg);
      }

      async function handleOk() {
        if (!src.value) {
          setSubLoading(false);
          return ElMessage.error('请先上传图片');
        }
        const uploadApi = props.uploadApi;
        if (uploadApi && isFunction(uploadApi)) {
          const blob = dataURLtoBlob(previewSource.value);
          try {
            setSubLoading(true);
            const result = await uploadApi({ name: 'file', file: blob, filename });
            emit('uploadSuccess', { source: previewSource.value, data: result.data });
            closeModal();
          } finally {
            setSubLoading(false);
          }
        }
      }

      return {
        src,
        modalRef,
        modalRegister,
        previewSource,
        showModal,
        beforeUpload,
        handleCropend,
        handleReady,
        handlerToolbar,
        handleOk,
      };
    },
  });
</script>

<style lang="scss" scoped>
  .cropper-box {
    display: flex;

    &-left,
    &-right {
      height: 340px;
    }

    &-left {
      width: 55%;

      &-cropper {
        height: 300px;
        background: #eee;
        background-image: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.25) 25%,
            transparent 0,
            transparent 75%,
            rgba(0, 0, 0, 0.25) 0
          ),
          linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.25) 25%,
            transparent 0,
            transparent 75%,
            rgba(0, 0, 0, 0.25) 0
          );
        background-position: 0 0, 12px 12px;
        background-size: 25px 25px;
      }

      &-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
    }

    &-right {
      width: 45%;

      &-preview {
        width: 220px;
        height: 220px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid #ddd;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &-preview-radius {
        border-radius: 50%;
      }

      &-group {
        display: flex;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid #d9d9d9;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
</style>
